@extends('my.layouts.mybasic')

@section('partial_css')
    @parent
    <link rel="stylesheet" href="{{ elixir('assets/css/cropper.css') }}">
@endsection

@section('customize_css')
    @parent
        .thumbnail{
            
        }
        .caption{
            margin: 0;
            padding:0;
        }
        .caption h4{
            margin: 15px 0;
        }
        .headportrait{
            margin: 50px 0 0;
        }
        .headportrait img{
            width: 65%;
            border: 1px solid #ddd;
        }
        .editheadportrait{
            margin: 0;
        }
        .editheadportrait img{
            width: 100%;
            border: 1px solid #ddd;
        }
        .btn-primary{
            margin: 0 10px 10px 0;
        }
        #error_message{
            display:none;
            margin: 2px;
            padding: 10px;
        }
        .head_button{
            margin-top: 15px;
        }
@endsection

@section('partial_js')
    @parent
    <script src="{{ elixir('assets/js/cropper.js') }}"></script>
@endsection

@section('customize_js')
    @parent
        // 初始化插件
        $('#editheadportrait').cropper({
            aspectRatio: 1/1,
            autoCropArea: 1,
        });
        
        // 传入本地图片
        var $image = $('#editheadportrait');
        var $inputImage = $('#inputImage');
        var URL = window.URL || window.webkitURL;
        var blobURL;
        
        if (URL) {
            $inputImage.change(function () {
                var files = this.files;
                var file;
          
                if (!$image.data('cropper')) {
                  return;
                }
          
                if (files && files.length) {
                    file = files[0];
            
                    if (/^image\/\w+$/.test(file.type)) {
                        blobURL = URL.createObjectURL(file);
                        $image.one('built.cropper', function () {
                            // 当加载完成后撤销！
                            URL.revokeObjectURL(blobURL);
                        }).cropper('reset').cropper('replace', blobURL);
                        $inputImage.val('');
                    } else {
                        window.alert('请选择一张图片！');
                    }
                }
            });
        } else {
            $inputImage.prop('disabled', true).parent().addClass('disabled');
        }
        
        // 提前预览
        $('#upload-view').click(function(){
            var img_obj = $('#editheadportrait').cropper("getCroppedCanvas");
            var img_base64 = img_obj.toDataURL("image/jpeg");
            $('#headportrait').attr('src',img_base64);
        });
        
        // 上传图片
        $('#upload-yes').click(function(){
            
            var img_obj = $('#editheadportrait').cropper("getCroppedCanvas");
            var img_base64 = img_obj.toDataURL("image/jpeg");
            var _token = $('input:hidden').val();
            var max_image_size = {{ $data['max_image_size'] }};
            var img_string = img_base64.split('data:image/jpeg;base64,')[1];
            var img_size = (img_string.length)/1024/1024;
            
            $('#error_message').hide();
            if(max_image_size <= img_size){
                $('#error_message').show().text('图像太大，请重新上传!');
                return false;
            }
            
            $.post(
                "{{ URL::route('headportrait') }}",
                { imgdata: img_base64, _token: _token },
                function(data){
                    if(data.status == 1){
                        $('#headportrait').attr('src',img_base64);
                        $('#topheadportrait').attr('src',img_base64);
                    }else{
                        $('#error_message').show().text(data.msg);
                    }
                },
                "json"
            );
        });
@endsection

@section('breadcrumbs')
    <ol class="breadcrumb">
        <li><a href="{{ url('/myconsole') }}"><i class="fa fa-btn fa-user"></i>个人中心</a></li>
        <li><a href="{{ url('/mysetting') }}"></i>帐号设置</a></li>
        <li class="active">用户头像</li>
    </ol>
@endsection

@section('mycontent')
    <div class="row">
        <div class="col-xs-10 col-md-6">
            <div class="caption">
                <h4>当前我的头像</h4>
                <p>如果您还没有设置自己的头像，系统会显示为默认头像，您需要自己上传一张新照片来作为自己的个人头像。</p>
            </div>
            <div class="headportrait">
                <img id="headportrait" class="img-responsive center-block img-circle" src="{{ !empty(Auth::user()->head_url) ? Auth::user()->head_url : url('images/default/headportrait.jpg') }}" alt="头像">
            </div>
        </div>
        <div class="col-xs-10 col-md-6">
            {!! csrf_field() !!}
            <div class="caption">
                <h4>设置我的新头像</h4>
                <p>请选择一个新照片进行上传编辑。</p>
            </div>
            <div class="editheadportrait">
                <img id="editheadportrait" class="img-responsive center-block" src="{{ url('images/default/headportrait.jpg') }}" alt="头像">
            </div>
            <div class="caption head_button">
                <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
                    <input type="file" class="sr-only" id="inputImage" name="file" accept="image/*">
                    <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="Import image with Blob URLs">
                      <span class="fa fa-file-image-o">&nbsp;选择图片</span>
                    </span>
                </label>
                <div class="btn btn-primary">
                    <span class="fa fa-eye" id="upload-view">&nbsp;提前预览</span>
                </div>
                <div class="btn btn-primary">
                    <span class="fa fa-upload" id="upload-yes">&nbsp;确认上传</span>
                </div>
            </div>
            <div class="alert alert-warning" id="error_message"></div>
        </div>
    </div>
@endsection